import React from "react";
import frame from '../../style/frame.less';
import connect from "react-redux/es/connect/connect";
import * as Actoin from "../services/action";

class Filter extends React.Component {

    constructor(props) {
        super(props);
    }

    useFilter = (e) => {
        this.props.loadModuleMenu('filterOptionGroup',  e.currentTarget.getAttribute("data-option-group"))
    };

    resetFilter = (e) => {
        this.props.loadModuleMenu('filterOptionGroup',  -1)
    };

    render() {
        return (
            <div style={{height: '40px'}}>
                <div className={frame.filter}>4 个筛选项</div>
                <div className={frame.filterLabel}>
                    <div className={frame.filterSelected} data-option-group="0" onMouseOver={this.useFilter} onMouseOut={this.resetFilter}>
                        <span>仓库</span>
                        <span className={frame.filterSelectedOption}>：新的仓库</span>
                        <div className={`${frame.filterOptionLayout} ${0 == this.props.filterOptionGroup ? '' : frame.hidden}`}>
                            <div className={frame.filterOption}>
                                <ul className={frame.optionGroup}>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className={frame.filterSelected} data-option-group="1" onMouseOver={this.useFilter} onMouseOut={this.resetFilter}>
                        <span>仓位</span>
                        <span className={frame.filterSelectedOption}>：良品</span>
                        <div className={`${frame.filterOptionLayout} ${1 == this.props.filterOptionGroup ? '' : frame.hidden}`}>
                            <div className={frame.filterOption}>
                                <ul className={frame.optionGroup}>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className={frame.filterSelected} data-option-group="2" onMouseOver={this.useFilter} onMouseOut={this.resetFilter}>
                        <span>销售状态</span>
                        <span className={frame.filterSelectedOption}>：正常销售</span>
                        <div className={`${frame.filterOptionLayout} ${2 == this.props.filterOptionGroup ? '' : frame.hidden}`}>
                            <div className={frame.filterOption}>
                                <ul className={frame.optionGroup}>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className={frame.filterSelected} data-option-group="3" onMouseOver={this.useFilter} onMouseOut={this.resetFilter}>
                        <span>标签</span>
                        <span className={frame.filterSelectedOption}>：普货</span>
                        <div className={`${frame.filterOptionLayout} ${3 == this.props.filterOptionGroup ? '' : frame.hidden}`}>
                            <div className={frame.filterOption}>
                                <ul className={frame.optionGroup}>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className={frame.filterSelect} data-option-group="4" onMouseOver={this.useFilter} onMouseOut={this.resetFilter}>
                        <span>品牌</span>
                        <div className={`${frame.filterOptionLayout} ${4 == this.props.filterOptionGroup ? '' : frame.hidden}`}>
                            <div className={frame.filterOption}>
                                <ul className={frame.optionGroup}>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                    <li>测试仓</li>
                                    <li>上海仓库</li>
                                    <li>斑马芝加哥仓库</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={frame.clear}></div>
            </div>
        )
    }
}

const mapStateToProps = (store) => {
    return {
        filterOptionGroup: store.filterOptionGroup,
    }
};

export default connect(mapStateToProps, Actoin)(Filter)
